<%@page contentType="text/html" pageEncoding="UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/QuestionSetService.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/script/questionSet/changeSequences.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/script/questionSet/QuestionSet.js"></script>

<script type="text/javascript">
    function questionsAction(submitAction) {
        afterSubmitRedirect("includeQuestions", "questions.html", submitAction, "submitAction2");
    }

    $(document).ready(function() {
        $("#rqBtn").click(function() {
            if(confirm("This page may have responses associated with it. By deleting it,"+
            "you will no longer be able to access those responses.")){
            QuestionSet.removeQuestion();}
        });

        var previewOnEdit = function () {
            var dataList = [];

            $("#questionList table").each(function() {
                var item = "{'qId':" + $(this).attr('questionId') + ",'sequence':'" + $(this).attr('sequence') + "'}";
                dataList.push(item);
            });

            $.post("preview.html", {questions : "[" + dataList.toString() + "]"}, function(data) {
                $("#preview").show();
                $("#questionSetTitle").html($("#displayTitleValue").val());
                $("#previewContent").html(data);
            });
        }

        $("#previewBtn").click(function() {
            previewOnEdit();
        });

        $("#previewBtn3").click(function() {
            previewOnEdit();
        });

        $("#includeQuestionBtn").click(function () {
            QuestionSet.includeQuestion();
        });

        initQbtns();
    });
</script>

<!--START: conent -->
<div id="questions" class="content2" style="display:none">
    <div class="insider">
        <div class="corners">
            <div class="corners_top"></div>

            <jsp:include page="briefInfo.jsp"/>

            <!-- Button: Save, Save and Exit, Cancel, Include, Preview -->
            <ul class="functions1 fun1_3">
                <li>
                    <input type="image" id="saveBtn2"
                           src="<%= request.getContextPath()%>/images/btn/functions1/btn_save.gif"
                           class="btn"/>
                </li>
                <li>
                    <input type="image" id="saveAndExitBtn2" class="btn"
                           src="<%= request.getContextPath()%>/images/btn/functions1/btn_save_exit.gif"/>
                </li>
                <li>
                    <jsp:include page="../common/qsCancelButton.jsp"/>
                </li>
                <li>
                    <input type="image" id="previewBtn" class="btn"
                           src="<%= request.getContextPath()%>/images/btn/functions1/btn_preview.gif"/>
                </li>
            </ul>

            <div class="corners_bottom"></div>
        </div>

        <div class="error">
            <h3 id="questionListMessage">
                <c:if test="${empty param.questionListMsgBak}">
                    This Page contains the following ${fn:length(questionSet.questionsInSet)}
                    Question${fn:length(questionSet.questionsInSet) > 1 ? 's' : ''}:
                </c:if>
                ${param.questionListMsgBak}
            </h3>
        </div>

        <!-- View, Edit & Remove buttons -->
        <ul class="functions2">
            <li class="fr">
                <input type="image" src="<%= request.getContextPath()%>/images/btn/functions1/btn_include.gif"
                       class="btn" onclick="showInclude()"/>
            </li>

            <li class="view">
                <input type="image" id="viewQuestionBtn" name="qbtn" class="btn" onclick="clickAction('../question/view')" alt="view"
                       src="<%= request.getContextPath()%>/images/btn/functions2/btn_view_light.gif"/>
            </li>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li>
                    <input type="image" id="editQuestionBtn" name="qbtn" class="btn"
                           onclick="clickAction('../question/edit')" alt="edit"
                           src="<%= request.getContextPath()%>/images/btn/functions2/btn_edit_light.gif"/>
                </li>
            </security:authorize>

            <li>
                <input type="image" id="rqBtn" name="qbtn" class="btn" alt="remove question"
                       src="<%= request.getContextPath()%>/images/btn/functions2/btn_remove_light.gif"/>
            </li>
        </ul>

        <div class="question_sets">
            <div class="question_sets_inside">
                <form id="includeQuestions" name="includeQuestions" method="post" eccc="true">
                    <input type="hidden" name="id" value="${param.id}"/>
                    <input type="hidden" id="submitAction2" name="submitAction"/>

                    <div id="questionList" class="question">
                        <c:if test="${empty param.questionsBak}">
                            <c:forEach var="qis" items="${questionsInSet}">
                                <!-- Get the indent level for each questions -->
                                <c:set var="indentLevel" value="${fn:length(fn:split(qis.sequence, '.'))}"/>

                                <!-- id: q_xxx, because all questions in a questionset has a unique sequence, so this value can identity a question. -->
                                <!-- name: parent_xxx, the value is used to get the up sibling and down sibling value for a question. -->
                                <table qisId="${qis.id}" questionId="${qis.question.questionId}"
                                       index="${qis.sequence}" sequence="${qis.sequence}" class="line${indentLevel}"
                                       parent="${fn:length(qis.sequence) > 2 ? fn:substring(qis.sequence, 0, fn:length(qis.sequence) - 2) : '.'}"
                                       onclick="Dialogs.subItemClick(this, 'id=${qis.question.questionId}', 'qbtn'); changeCurrentNode(null, this);"
                                       width="100%" border="0" cellpadding="0" cellspacing="0"
                                       status="${qis.question.questionStatusType.code}"
                                       availability="${qis.question.questionAvailabilityType.code}">
                                    <tbody>
                                    <tr>
                                        <th width="${3 + (indentLevel - 1) * 4}%" class="number${indentLevel}"
                                            scope="row">${qis.sequence}</th>
                                        <td width="${27 - (indentLevel - 1) * 4}%"
                                            class="row1">${qis.question.name}</td>    
                                        <td width="12%"
                                            class="row2">${qis.question.refId}</td>
                                        <td width="8%" class="row2">Ver ${qis.question.version}</td>
                                        <td width="16%" class="row3">
                                                ${qis.question.questionAvailabilityType.name}
                                            /
                                                ${qis.question.questionStatusType.name}
                                        </td>
                                        <td width="34%" class="row4">
                                                ${fn:substring(qis.question.text, 0, 35)}…
                                        </td>
                                    </tr>
                                    <input type="hidden" name="S-${qis.sequence}" value="${qis.sequence}"/>
                                    </tbody>
                                </table>
                            </c:forEach>
                        </c:if>
                        ${param.questionsBak}
                    </div>
                </form>

                <ul class="question_sets_move">
                    <li>
                        <input type="image" id="moveUpBtn" name="qbtn" class="btn" onclick="up();"
                               src="<%= request.getContextPath()%>/images/btn/functions2/btn_move_up_light.gif"/>
                    </li>
                    <li>
                        <input type="image" id="moveDownBtn" name="qbtn" class="btn" onclick="down();"
                               src="<%= request.getContextPath()%>/images/btn/functions2/btn_move_down_light.gif"
                               alt="text"/>
                    </li>
                    <li class="move_out">
                        <input type="image" id="moveOutBtn" name="qbtn" class="btn" onclick="out();"
                               src="<%= request.getContextPath()%>/images/btn/functions2/btn_move_out_light.gif"/>
                    </li>
                    <li>
                        <input type="image" id="moveInBtn" name="qbtn" class="btn" alt="text" onclick="moveIn();"
                               src="<%= request.getContextPath()%>/images/btn/functions2/btn_move_in_light.gif"/>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--END: conent -->

<!-- Include Questions Begin -->
<jsp:include page="includeQuestion.jsp"/>
<!-- Include Questions End -->

<!-- Question Set Preview -->
<jsp:include page="previewFrame.jsp"/>